{% extends 'base.html' %}
{% load static %}
{% block title %}管理后台{% endblock %}

{% block extra_css %}
<style>
    .sidebar {
        height: 100vh;
        background: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }
    .nav-link.active {
        background-color: #e9ecef;
    }
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        <div class="list-group">
            <a href="{% url 'dashboard' %}" class="list-group-item list-group-item-action">仪表盘</a>
            <a href="{% url 'user_manage' %}" class="list-group-item list-group-item-action">用户管理</a>
            <a href="{% url 'content_manage' %}" class="list-group-item list-group-item-action">内容管理</a>
            <a href="{% url 'system_config' %}" class="list-group-item list-group-item-action">系统配置</a>
            <a href="{% url 'data_statistics' %}" class="list-group-item list-group-item-action">数据统计</a>
            <a href="{% url 'log_manage' %}" class="list-group-item list-group-item-action">日志管理</a>
            <a href="{% url 'message_center' %}" class="list-group-item list-group-item-action">消息中心</a>
            <a href="{% url 'help_document' %}" class="list-group-item list-group-item-action">帮助文档</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <img src="{% static 'images/nature.jpg' %}" class="user-avatar me-2" alt="头像">
                    <span class="navbar-brand mb-0">管理员</span>
                </div>
                <a href="{% url 'logout' %}" class="btn btn-outline-danger">退出登录</a>
            </div>
        </nav>

        <!-- 内容区块 -->
        <div class="content-area min-vh-100 d-flex flex-column justify-content-center align-items-center">
            <h1 class="display-3 font-weight-bold text-center mb-5">欢迎使用管理后台</h1>
            <div class="alert alert-primary w-75 text-center" role="alert">
                <p class="lead mb-0">请从侧边栏选择要操作的功能模块</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 侧边栏交互逻辑
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('click', function(e) {
            document.querySelector('.list-group-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
</script>
{% endblock %}